<template>
	<view class="order-detail page">
		<view class="title">
			<text class="status">订单状态: {{statusOptions[vo.mallOrder.orderStatus]}}</text>
			<text class="paid">支付状态: {{payStatusOptions[vo.mallOrder.paid]}}</text>
		</view>
		<view class="con">
		<scroll-view style="height: 100%;" class="scroll" scroll-y="true">
		
			
		
		<view class="log-info">
			<view class="log">
				<text class="iconfont iconfahuo"></text>
				<view class="info" v-if="vo.mallOrder.sendTime"  @click="copy">
					<text class="detail">
						物流单号(点击复制): {{vo.mallOrder.logCompany}}{{vo.mallOrder.logNo}}
					</text>
					<text class="time">发货时间: {{vo.mallOrder.sendTime}}</text>
				</view>
				<view v-else class="info">
					<text class="detail">
						暂未发货
					</text>
					<text class="time">发货时间: 等待更新</text>
				</view>
			</view>
			<view class="address">
				<text class="iconfont icondizhi"></text>
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{vo.mallOrder.name}}</text>
						<text class="phone">{{vo.mallOrder.phone}}</text>
					</view>
					<view class="detail">
					{{vo.mallOrder.province}}{{vo.mallOrder.city}}{{vo.mallOrder.county}}{{vo.mallOrder.detail}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="order-info">
			<view class="top">
				<image class="img" :src="logo"></image>
				<text class="name">{{name}}</text>
			</view>
			<view class="items">
				<mall-order-item :key="index" :item="item" v-for="(item,index) in vo.mallOrder.items"  class="item"></mall-order-item>
			</view>
			<view class="total">
				<text class="txt">实付款(含运费)</text>
				<text class="price">¥ {{vo.mallOrder.pay}}</text>
			</view>
		</view>
		
		<view class="detail-info">
			<view class="title">
				<text class="txt">订单信息</text>
			</view>
			<view class="label">
				<text class="name">订单编号</text>
				<text class="value">{{vo.mallOrder.orderNo}}</text>
			</view>
			<view class="label">
				<text class="name">下单时间</text>
				<text class="value">{{parseTime(vo.mallOrder.orderTime)}}</text>
			</view>
			<view class="label">
				<text class="name">订单状态</text>
				<text class="value">{{statusOptions[vo.mallOrder.orderStatus]}}</text>
			</view>
			<view class="label">
				<text class="name">支付状态</text>
				<text class="value">{{payStatusOptions[vo.mallOrder.paid]}}</text>
			</view>
			<view class="label">
				<text class="name">订单总价</text>
				<text class="value">{{vo.mallOrder.price}}</text>
			</view>
			<view class="label">
				<text class="name">邮费</text>
				<text class="value">{{vo.mallOrder.logFee}}</text>
			</view>
			<view class="label">
				<text class="name">使用积分</text>
				<text class="value">{{vo.mallOrder.point}}</text>
			</view>
			<view class="label" v-if="vo.mallOrder.paid==1">
				<text class="name">实际支付</text>
				<text class="value">{{vo.mallOrder.pay}}</text>
			</view>
			<view class="label">
				<text class="name">物流费</text>
				<text class="value">{{vo.mallOrder.logFee}}</text>
			</view>
			<view class="label">
				<text class="name">备注</text>
				<text class="value" v-if="vo.mallOrder.remark">{{vo.mallOrder.remark}}</text>
			</view>
		
		<!-- 	<view class="btns">
				<view class="left">
					<text class="iconfont iconlianximaijia"></text>
					<text class="txt">联系卖家</text>
				</view>
				<view class="right">
					<text class="iconfont iconlianximaijia-dingdanxiangqing"></text>
					<text class="txt">联系客服</text>
				</view>
			</view> -->
		</view>
		</scroll-view>
		</view>
		<mall-order-detail-bar @pay="pay" @cancel="cancel"  :order="vo.mallOrder"></mall-order-detail-bar>
	</view>
</template>

<script>
	import mallOrderDetailBar from '@/components/mall-order-detail-bar/mall-order-detail-bar.vue'
	import {info,repay} from '@/api/order.js'
	import {showCorrect} from '@/modal/index.js'
	import {cancel} from '@/api/order.js'
	import CONFIG from '@/config/index'
	import {parseTime} from '@/util/time'
	export default {
		components:{
			mallOrderDetailBar
		},
		onShow(){
		  let id = this.$Route.query.id
		  if(id){
			  info(id).then(res => {
				  this.vo = res.data
			  })
		  }
		},
		computed:{
			logo(){
				return CONFIG.IMG_HEAD + getApp().globalData.config.logo
			},
			name(){
				return  getApp().globalData.config.name
			}
		},
		methods:{
			parseTime(time){
				return parseTime(time);
			},
			pay(){
				repay(this.vo.mallOrder.id).then(res => {
					let ob = JSON.parse(res.data)
					uni.requestPayment({
						success:()=>{
							showCorrect("支付成功").then(res => {
								info(id).then(res => {
									this.vo = res.data
								})
							})
						},
						...ob
					})
				})
			},
			cancel(){
				cancel(this.vo.mallOrder.id).then(res => {
					showCorrect("取消成功").then(res => {
						console.log(res)
					})
					this.vo.mallOrder = res.data
				})
			},
			copy(){
				console.log('cccpp')
				wx.setClipboardData({
				  data: this.vo.mallOrder.logNo,
				  success (res) {
				   // showCorrect("复制成功:"+this.vo.mallOrder.logNo)
				  }
				})
			}
		},
		data() {
			return {
				statusOptions:["新订单","配货中","已发货","已取消"],
				payStatusOptions:["未支付","已支付"],
			    vo:{}
			};
		}
	}
</script>

<style lang="stylus" scoped>
.order-detail
	background url(../../../static/dbg.png)  no-repeat
	background-size 100% 150upx
	min-height 100%
	background-color #EFEFEF
	display flex
	flex-direction column
	.title
		height 100upx
		color #FFFFFF
		font-size 28upx
		display flex
		align-items center
		.status
			margin-left 100upx
			margin-right 20upx
	.con
		padding 0 20upx 20upx
		flex 1
		overflow hidden
		.log-info
			border-radius 10upx
			overflow hidden
			.log
				height 120upx
				display flex
				padding 0 22upx
				align-items center
				background-color white
				border-bottom 1px solid #DCDCDC
				.iconfont
					color #42A3CC
					font-size 48upx
					margin-right 21upx
				.info
					display flex
					flex-direction column
					.detail
						color #42A3CC
						font-size 22upx
						margin-bottom 20upx
					.time
						color #A1A1A1
						font-size 20upx
			.address
				 margin-bottom 10upx
				 background-color #FFFFFF
				 height 139upx
				 display flex
				 padding 0 22upx 
				 justify-content flex-start
				 align-items center
				 .icondizhi
					margin-right 18upx
					font-size 40upx
					color #F0C808
				.address-info
					width 551upx
					display flex
					flex-direction column
					justify-content center
					.user-info
						margin-bottom 14upx
						display flex
						align-items center
						.name
							font-size 22upx
							color #6F6F6F
							margin-right 25upx
							line-height 32upx
						.phone
							color #6F6F6F
							font-size 22upx
					.detail
						text-overflow ellipsis
						line-clamp 2
						overflow hidden
						font-size 22upx
						color #6F6F6F
		.order-info
			border-radius 10upx
			background-color white
			padding 20upx 20upx
			.top
				height 48upx
				display flex
				align-items center
				display flex
				align-items center
				margin-bottom 33upx
				.img
					height 48upx
					width 48upx
					margin-right 12upx
				.name
					color #4E3D07
					font-size 28upx
			.items
				display flex
				flex-direction column
				.item
					margin-bottom 19upx
			.total
				display flex
				align-items center
				justify-content space-between
				padding 20upx 0 10upx 0
				.txt
					color #6F6F6F
					font-size 24upx
				.price
					color #F7895E
					font-size 22upx
		.detail-info
			border-radius 10upx
			background-color white
			margin-top 20upx
			padding 20upx 11upx 10upx 11upx
			.title
				height 25upx
				color #4E3D07
				font-size 22upx
				padding-left 10upx
				border-left 4upx solid #F7895E
				display flex
				align-items center
				margin-bottom 27upx
			.label
				margin-bottom 21upx
				margin-left 25upx
				color  #6F6F6F
				font-size 20upx
				display flex
				.name
					min-width 150upx
				.value
					margin-left 40upx
					
			.btns
				height 81upx
				display flex
				align-items center
				border-top 1px solid #DCDCDC
				.left
					border-right 1px solid #A1A1A1
				.left,.right
					display flex
					align-items center
					justify-content center
					flex 1
					.iconfont
						color #1398DA
						font-size 36upx
					.txt
						font-size 22upx
						color #6F6F6F
					
					
					
				
		
</style>
